<route>
{
    meta: {
        title: '实验室信息查看'
    }
}
</route>

<template>

  <div class="app-container"
       style="margin-left: 20px; margin-right: 20px;margin-top: 35px;">
    <!-- style="margin-left: 20px;margin-top: 20px;" -->

    <el-row>
      <el-col :span="24">
        <el-form :model="queryParams"
                 ref="queryFormRef"
                 :inline="true"
                 label-width="90px">
          <el-form-item label="实验室名称"
                        prop="appointment_user">
            <el-input v-model="queryParams.lab_site"
                      placeholder="请输入实验室名称"
                      clearable
                      @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="实验室类型"
                        prop="appointment_type">
            <el-select v-model="queryParams.appointment_type"
                       placeholder="教学"
                       @change="handleQuery()">
              <el-option v-for="item in labType"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary"
                       :icon="Search"
                       @click="handleQuery"
                       round
                       plain>搜索</el-button>
            <el-button :icon="Refresh"
                       @click="resetQuery"
                       round
                       plain>重置</el-button>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>

    <el-divider>
      <el-icon>
        <star-filled />
      </el-icon>
    </el-divider>

    <el-row>
      <el-table :data="labList">
        <el-table-column fixed=""
                         type="index"
                         label="序号"
                         :index="pageNum" />

        <el-table-column label="实验室名称"
                         prop="lab_site" />

        <el-table-column prop="appointment_time"
                         label="预约时间" />
        <el-table-column prop="appointment_user"
                         label="预约人" />
        <el-table-column prop="appointment_type"
                         label="实验室类型" />
        <el-table-column fixed="right"
                         label="操作"
                         width="250px"
                         v-if="queryParams.appointment_type=='教学'">
          <template #default="scope">
            <el-button type="success"
                       plain
                       size="small"
                       @click="addStudent(scope.row)">添加学生
            </el-button>
            <el-button size="small"
                       plain
                       type="danger">上传实验报告
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <pagination
            v-show="page.total > 0"
            :total="page.total"
            v-model:page="page.pageNum"
            v-model:limit="page.pageSize"
            @pagination="getList"
        />
      </div>
    </el-row>
    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :title="title"
               v-model="openForm.open"
               width="700px"
               append-to-body>
      <el-transfer v-model="value"
                   style="text-align: left; display: inline-block;"
                   filterable
                   :titles="['未选择', '已选择']"
                   :button-texts="['取消', '添加']"
                   :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}',
      }"
                   :props="{
      key: 'value',
      label: 'desc',
    }"
                   :data="data">
      </el-transfer>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="handleChangee()">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>

</template>

<script lang="ts" setup>
import {
  StarFilled,
  Edit,
  Share,
  Delete,
  Search,
  Upload,
  Refresh,
  Plus,
  User,
} from '@element-plus/icons-vue'
import {
  defineComponent,
  onMounted,
  reactive,
  toRef,
  ref,
  computed,
  toRefs,
  getCurrentInstance,
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'

const labList = ref([])
const queryFormRef = ref(null)
const open = ref(false)
const title = ref('')
const pageNum = ref(1)
/**基本使用的一些表单数据 */
const openForm = ref({
  open: false,
})
interface Student {
  value: number
  desc: string
  disabled: boolean
}
//获取所有student数据
const generateStudentData = () => {
  const data: Student[] = []
  api.post('user/selectUser', { user_type: 2 }).then((res) => {

    for (let i = 0; i < res.data.length; i++) {
      data.push({
        value: res.data[i].id,
        desc: res.data[i].account,
        disabled: false,
      })
    }
    console.log('tableData=', labList.value)
  })

  return data
}
const value = ref([])
const data = ref<Student[]>(generateStudentData())

const handleChangee = () => {
  console.log('value---->' + value.value)
  console.log('data---->' + data.value)

  api
    .get(
      'labAppointment/addLabAppointmentStudent/' +
        value.value +
        '/' +
        queryParams.value.id
    )
    .then((res) => {
        openForm.value.open = false
    })
}
//实验室类型查询
const labType = [
  {
    value: '教学',
    label: '教学',
  },
  {
    value: '个人学习',
    label: '个人学习',
  },
]

/**查询条件 */
const queryParams = ref({
  id: undefined,
  appointment_user: localStorage.getItem('account'),
  appointment_type: '教学',
  lab_site: '',
  appointment_flag: 2,
})
const page = ref({
  total: 1,
  currentpage: 1,
  pagesize: 10,
  pageNum:1
})

/**获取表单数据*/
const getList = () => {
  console.log(queryParams.value)
  api
    .post('labAppointment/selectAppointmentByFlag/'+page.value.pageNum, queryParams.value)
    .then((res) => {
      labList.value = res.data.list
      console.log('tableData=', labList.value)
    })
}
/** 搜索按钮操作 */
function handleQuery() {
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
/** 取消按钮 */
function cancel() {
  openForm.value.open = false
}

/**添加学生按钮 */
const addStudent = (row) => {
  openForm.value.open = true
  queryParams.value.id = row.id
  //+++++++添加功能
  //查询这个时间点该学生是否有其他预约
  data.value[7].disabled=true
  api
    .get('labAppointment/selectLabAppointmentStudent/' + row.id)
    .then((res) => {

      value.value = res.data
      console.log('value--->', value.value)
    })
}
getList()
</script>
